<script>
export default {
  name: "navigation",
  data() {
    return {
      categories: [
        {
          name: '电子产品',
          path: '/electronics',
          subCategories: [
            {name: '手机', path: '/electronics/mobile'},
            {name: '电脑', path: '/electronics/computer'},
            {name: '数码', path: '/electronics/digital'}
          ]
        },
        {
          name: ' 服饰鞋帽',
          path: '/clothing',
          subCategories: [
            {name: '男装', path: '/clothing/men'},
            {name: '女装', path: '/clothing/women'},
            {name: '童装', path: '/clothing/children'}
          ]
        },
        {
          name: ' 家电厨具',
          path: '/appliances',
          subCategories: [
            {name: '空调', path: '/appliances/air-conditioner'},
            {name: '冰箱', path: '/appliances/refrigerator'},
            {name: '油烟机', path: '/appliances/cooktop'}
          ]
        },
        {
          name: ' 个人洁护 ',
          path: '/personal-care',
          subCategories: [
            {name: ' 美妆 ', path: '/personal-care/beauty'},
            {name: ' 洗漱 ', path: '/personal-care/toiletries'},
            {name: ' 纸巾 ', path: '/personal-care/tissue'}
          ]
        },
        {
          name: ' 绿色出行 ',
          path: '/green-travel',
          subCategories: [
            {name: ' 电动车 ', path: '/green-travel/electric-bike'},
            {name: ' 新能源 ', path: '/green-travel/new-energy'},
            {name: ' 配件 ', path: '/green-travel/accessories'}
          ]
        }
      ]
    };
  }
}
</script>

<template>
  <div class="navigation">
    <div
        v-for="(category, index) in categories"
        :key="index"
        class="category-item"
    >
      <router-link :to="category.path" class="category-name">
        {{ category.name + "  " }}
      </router-link>
      <span class="separator">|</span>
      <ul class="sub-categories">
        <li v-for="(subCategory, subIndex) in category.subCategories" :key="subIndex">
          <router-link :to="subCategory.path">
            {{ subCategory.name }}
          </router-link>
          <span v-if="subIndex !== category.subCategories.length - 1">/</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.navigation {
  display: flex;
  flex-direction: column;
}

.category-item {
  display: flex;
  align-items: center; /* 确保分类名、分隔符和子分类在同一行 */
  padding: 15px; /* 增加内边距，提升可读性 */
  cursor: pointer;
  border-bottom: 1px solid #e8e8e8; /* 添加底部边框，增强分隔感 */
}

.category-name {
  font-size: 14px; /* 分类名文字大小 */
  margin-right: 10px; /* 分类名与分隔符之间的间距 */
}

.separator {
  margin: 0 10px; /* 分隔符与分类名、子分类之间的间距 */
}

.sub-categories {
  list-style-type: none; /* 移除默认列表样式 */
  padding: 0;
  margin: 0;
  display: flex; /* 子分类水平排列 */
  align-items: center; /* 子分类垂直居中 */
}

.sub-categories li {
  font-size: 12px; /* 子分类文字较小 */
  color: #666; /* 子分类文字颜色较浅 */
  margin-right: 5px; /* 子分类之间的间距 */
}

.sub-categories li a {
  text-decoration: none; /* 移除默认的下划线 */
  color: #666; /* 子分类链接颜色 */
}

.sub-categories li a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
</style>